<template>
    <div class="mainV">
        <img class="mainBg" src="@/assets/mb.png" alt="">
        <div class="mainS" v-for="(i, o) in reservation" :key="o">
            <div class="mainSi">机构：<span>{{ i.orgId_dictText }}</span></div>
            <div class="mainSi">科室：<span>{{ i.dept_dictText }}</span></div>
            <div class="mainSi">医生：<span>{{ i.doctorId_dictText }}</span></div>
            <div class="mainSi">预约时段：<span>{{ i.yyDate }} {{ i.yyInterval }}</span></div>
            <div class="mainSi">房间名称：<span>{{ i.roomId_dictText }}</span></div>
            <div :class="['mainSi', 'mainSi' + i.status]">问诊状态：<span>{{ i.status == 0 ? '未开始' : i.status == 1 ? '进行中' :
                i.status
                    == 2 ? '已取消' : i.status == 3 ? '已完成' : i.status == 9 ? '已过期' : '已反馈'
                    }}</span></div>
            <div class="mainSib" v-if="i.status == 1">
                <el-button size="mini" type="success" round @click="joinInMt(i)">加入问诊</el-button>
            </div>
            <div class="mainSib" v-if="i.status == 0">
                <el-button size="mini" style="background-color: #eee;" type="dashed" round
                    @click="cancle(i)">取消预约</el-button>
            </div>
            <div class="mainSib">
                <el-button size="mini" v-if="i.status == 3" style="background-color: #eee;" type="dashed" round
                    @click="investigate(i)">满意度调查</el-button>
                <el-button size="mini" v-if="i.status > 2 && i.status !== 9" style="background-color: #eee;"
                    type="dashed" round @click="complaint(i)">投诉与建议</el-button>
                <el-button size="mini" v-if="i.status > 2 && i.status !== 9" style="background-color: #eee;" round
                    type="dashed" @click="report(i.roomId)">查看报告</el-button>
            </div>
        </div>
        <div class="tabs">
            <div class="tab " @click="openResevation">
                <i class="el-icon-s-finance"></i>
                <p>问诊预约</p>
            </div>
            <div class="tab tabA">
                <i class="el-icon-s-order"></i>
                <p>我的预约</p>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="70%" :show-close="false">
            <span style="font-size: 18px;">确定取消 {{ cancleItem.yyDate }} {{ cancleItem.yyInterval }} {{
                cancleItem.orgId_dictText }} {{ cancleItem.dept_dictText }} {{ cancleItem.doctorId_dictText }}
                的问诊？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="cancleOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
import moment from 'moment'
export default {
    data() {
        return {
            moment,
            cancleItem: {},
            dialogVisible: false,
            reservation: []
        }
    },
    mounted() {
        this.getMainList();
    },
    methods: {
        getMainList() {
            fetchGet('/wz/reserve/wzReserve/list', {
                column: 'createTime',
                order: 'desc',
                pageNo: 1,
                pageSize: 9999
            }).then(res => {
                res.result.records.map(i => {
                    if (i.status > 1) return;
                    if (this.moment(i.yyDate + ' ' + i.yyTime) > this.moment()) {
                        i.status = 0
                    } else if (this.moment() < this.moment(i.yyDate + ' ' + i.yyInterval.split('-')[1])) {
                        i.status = 1
                    } else {
                        i.status = 9
                    }
                })
                this.reservation = res.result.records
            })
        },
        joinInMt(item) {
            this.$router.push({ path: '/info', query: { roomName: item.roomId_dictText, } })
        },
        openResevation() {
            this.$router.push('/search')
        },
        cancle(item) {
            this.dialogVisible = true
            this.cancleItem = item
        },
        cancleOk() {
            fetchGet('/wz/reserve/wzReserve/cancel', { id: this.cancleItem.id }).then(res => {
                if (res.code == 200) {
                    this.getMainList();
                    this.dialogVisible = false
                }
                this.$message(res.message)
            })
        },
        investigate(item) {
            this.$router.push({ path: '/investigate', query: { item: item, } })
        },
        complaint(item) {
            this.$router.push({ path: '/complaint', query: { item: item, } })
        },
        report(roomId) {
            this.$router.push({ path: '/report', query: { roomId: roomId, } })
        },
    },
}
</script>
<style lang="scss" scoped>
.mainV {
    width: 100vw;
    min-height: 100vh;
    
    padding: 20px 0 60px 0;

    .mainS {
        background-color: #fff;
        border-radius: 8px;
        margin: 0 20px 20px 20px;
        padding: 10px;
        position: relative;
        z-index: 2;

        .mainSi {
            color: #666;
            margin-bottom: 5px;

            span {
                display: inline-block;
                padding: 2px 6px;
                border-radius: 4px;
                color: #333;
            }
        }

        .mainSi0 span {
            color: #fff;
            background-color: #E6A23C;
        }

        .mainSi1 span {
            color: #fff;
            background-color: #409EFF;
        }

        .mainSi2 span {
            color: #fff;
            background-color: #909399;
        }

        .mainSi3 span {
            color: #fff;
            background-color: #3ba73b;
        }

        .mainSi4 span {
            color: #fff;
            background-color: #3ba73b;
        }

        .mainSi9 span {
            color: #fff;
            background-color: #909399;
        }

        .mainSib {
            width: 100%;
            text-align: right;
            margin-top: 10px;
        }
    }

    .tabs {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 0 8px #ccc;
        background-color: #fff;
        z-index: 3;

        .tab {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #888;

            i {
                font-size: 22px;
                margin-bottom: 5px;
            }

            p {
                font-size: 14px;
            }
        }

        .tabA {
            color: #67C23A;
            border-left: 1px solid #ccc;
        }
    }
}

.mainBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: .2;
    z-index: 1;
}
</style>